<template>
	<view class="header_bg"></view>
	<view style="text-align: center">
		<image class="info_logo" :src="userinfo.image" @click="headimg()"></image>
	</view>
	<view class="section">
		<uni-list :border="true">
			<uni-list-item ellipsis="1" title="name:" :rightText="userinfo.username" @click="inputDialogToggle(0)" clickable showArrow />
			<!-- <uni-list-item ellipsis="1" title="sex" :rightText="userinfo.sex" @click="inputDialogToggle(1)" clickable
				showArrow /> -->
			<uni-list-item ellipsis="1" title="account" :rightText="userinfo.phone"  clickable showArrow />
			<uni-list-item ellipsis="1" title="email" :rightText="userinfo.email" @click="inputDialogToggle(3)" clickable showArrow />
			<uni-list-item ellipsis="1" title="register date" :rightText="userinfo.useful_time"  clickable showArrow />
		</uni-list>
	</view>
	<view style="position: absolute; bottom: 80px; width: 100%">
		<button size="default" type="primary" plain="true" class="exit" @click="exit()">exit</button>
	</view>

	<view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog
				ref="inputClose"
				:data-key="dialog.key"
				mode="input"
				:title="dialog.title"
				:value="dialog.value"
				:placeholder="dialog.holder"
				@confirm="dialogInputConfirm"
			></uni-popup-dialog>
		</uni-popup>
		<uv-calendars ref="calendars" @confirm="confirm" />
	</view>
</template>

<script>
import { ossUpload } from '@/js_sdk/jason-alioss-upload/oss.js';
import { getUserId } from '@/common/tools.js';

export default {
	components: {},
	data() {
		return {
			userinfo: {
				id: 1,
				username: '',
				name: '1234',
				useful_time: '',
				sex: '',
				phone: '',
				email: '',
				image: '../../static/uni.png'
			},
			dialog: {
				key: '',
				title: '',
				value: '',
				holder: ''
			}
		};
	},
	onReady() {
		// console()
		this.getUserInfo();
	},
	methods: {
		exit() {
			uni.setStorageSync('username','');
			uni.setStorageSync('password','');
			uni.redirectTo({
				url: '/pages/login/index'
			});
		},

		getUserInfo() {
			this.$http.get(this.$api.userinfo.url + '/' + getUserId()).then((res) => {
				console.log(res);
				this.userinfo = res.result;
			});
		},

		updateUserinfo(obj) {
			console.log(obj);
			this.$http.put(this.$api.updateUser.url + '/' + getUserId(), obj).then((res) => {
				if (res.code == 1) {
					console.log('更新成功');
					for (let key in obj) {
						this.userinfo[key] = obj[key];
					}
				}
			});
		},

		headimg() {
			// console.log(123)
			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album'], //从相册选择
				success: async (file) => {
					console.log(file.tempFilePaths[0]);
					const { success, data } = await ossUpload(file.tempFilePaths[0], file.tempFiles[0].path, 'head/');
					if (success) {
						// this.userinfo.image = data
						this.updateUserinfo({
							image: data
						});
					}
				}
			});
		},

		updateDialoginfo(key, title, value, holder = '') {
			this.dialog.key = key;
			this.dialog.title = title;
			this.dialog.value = value;
			this.dialog.holder = holder;

			this.$refs.inputDialog.open();
		},

		inputDialogToggle(res) {
			switch (res) {
				case 0:
					this.updateDialoginfo('username', this.$t('info.name'), this.userinfo.username);
					break;
				case 1:
					this.updateDialoginfo('sex', this.$t('请修改性别'), this.userinfo.sex);
					break;
				case 2:
					this.updateDialoginfo('phone', this.$t('请修改电话'), this.userinfo.phone);
					break;
				case 3:
					this.updateDialoginfo('email', this.$t('info.email'), this.userinfo.email);
					break;
				case 4:
					this.open();
			}
		},

		dialogInputConfirm(e) {
			let key = this.dialog.key;
			let value = e;
			this.updateUserinfo({
				[key]: value
			});
			this.getUserInfo();
		},

		open() {
			this.$refs.calendars.open();
		},
		confirm(e) {
			console.log(e);
			console.log(e.year);
			this.updateUserinfo({
				useful_time: `${e.year}-${e.month}-${e.date}`
			});

			this.getUserInfo();
		}
	}
};
</script>

<style>
.header_bg {
	background-image: url('../../static/my/bg.png');
	width: 100%;
	height: 300px;
	position: absolute;
}
.info_logo {
	margin: 40px;
	width: 160px;
	height: 160px;
	border-radius: 50%;
}
.section {
	margin: 10px;
	border-radius: 30px;
	background-color: white;
}

.exit {
	margin-left: 40px;
	margin-right: 40px;
	border-radius: 10px;
}
</style>
